<template>
  <div
    class="
  "
  >
    <div class="title-tabs">
      <div
        class="tab"
        :class="{ active: active == index }"
        v-for="(tab, index) in tabs"
        :key="index"
        @click="toggle(index, tab.val)"
      >
        {{ tab.name }}
      </div>
      <div class="date">
        <el-date-picker
          v-model="tradeDate"
          type="date"
          value-format="yyyy-MM-dd"
          :editable="false"
          :clearable="false"
          :picker-options="pickerOptions1"
          placeholder="选择日期"
        >
        </el-date-picker>
        <i class="date-icon"></i>
      </div>
    </div>
    <div class="header">
      <div
        class="headline"
        :class="[{ activeL: activeL == index }, item.color]"
        @click="showLibrary(item, index)"
        v-for="(item, index) in selectObj"
        :key="index"
      >
        {{ item.headline }}
      </div>
    </div>
    <select-box
      v-for="(item, index) in selectObj"
      :key="index"
      :library="item"
      :show="item.show"
    ></select-box>
    <div style="margin-bottom: 51px"></div>
    <div class="result">
      <div class="left">
        <span class="title">指标</span>
        <span v-for="(item, index) in indexList" :key="index" class="item"
          >{{ item.name }} <i class="del" @click="remove(item)"></i>
        </span>
      </div>
      <div class="right">
        <span class="s count" @click="add">计算</span>
        <span class="s reset" @click="reset">重置</span>
      </div>
    </div>
  </div>
</template>
<script>
import SelectBox from "../comps/select";
import * as model from "../model/index";
import { mapState } from "vuex";
import { getDate } from "../script/utils";

export default {
  data() {
    return {
      active: 0,
      activeL: 3,
      model,
      tradeDate: "", //选股日期
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      selectObj: [
        {
          headline: "选股弹药库",
          color: "orange",
          bank: model.xgdyk,
          show: false,
        },
        {
          headline: "形态武器库",
          color: "blue",
          bank: model.xtwqk,
          show: false,
        },
        {
          headline: "指标武器库",
          color: "purple",
          bank: model.zbwqk,
          show: false,
        },
        // {
        //   headline: "机构武器库",
        //   color: "sky-blue",
        //   bank: model.jgwqk,
        //   show: true,
        // },
        // {
        //   headline: "选股模型库",
        //   color: "yellow",
        //   bank: model.xgmxk,
        //   show: false,
        // },
        {
          headline: "市场分类库",
          color: "wathet",
          bank: model.scflk,
          show: false,
        },
      ],
      tabs: [
        // { name: "三花战法", val: 3 },
        { name: "三步擒龙战法", val: 2 },
        // { name: "先锋战法", val: 4 },
        { name: "全市场", val: 1 },
      ],
      resList: [],
    };
  },
  components: { "select-box": SelectBox },
  computed: {
    ...mapState(["indexList", "delArr"]),
  },

  methods: {
    showLibrary(item, index) {
      this.selectObj.map((item) => {
        item.show = false;
        return item;
      });

      this.selectObj[index].show = true;
      this.activeL = index;
    },

    toggle(i, v) {
      this.active = i;
      this.reset();
      model.zbwqk[0].v.map((item) => {
        item.index = -1;
        return item;
      });
      if (i == 2) {//战法
        this.selectObj.map((item) => {
          item.show = false;
          return item;
        });
        this.selectObj[0].show = true;
      } else {
        this.selectObj.map((item) => {
          item.show = false;
          return item;
        });
        this.selectObj[v].show = true;
        // if (i == 1) {
        if (i == 0) {
          this.$store.state.indexList = model.sbql;
          model.zbwqk[0].v.map((item) => {
            if (
              item.field == "qscyDragonScaleLine" ||
              item.field == "dkjcShortBsSignal" ||
              item.field == "bhlnEnergyBsSignal"
            ) {
              item.index = 0;
            }
            return item;
          });
        } else {
            this.selectObj.map((item) => {
                item.show = false;
                return item;
            });
            this.selectObj[v].show = true;
        //   this.$store.state.indexList.push(model.shzf);
        }
      }
    },
    remove(item) {
      this.$store.state.delArr.push(item.field);
      let arrIndex = this.indexList.indexOf(item);
      if (arrIndex > -1) {
        this.indexList.splice(arrIndex, 1);
      }
      this.$store.state.indexList = this.indexList;
    },
    reset() {
      const arr = [];
      this.indexList.forEach((el) => {
        arr.push(el.field);
      });
      this.$store.state.delArr = arr;
      this.$store.state.indexList = [];
    },
    add() {
      let newObj = {},
        jgOBj = {},
        marketCode = "",
        listSector = "",
        shapeTypesArr = [],
        poolTypesArr = [],
        bkArr = [];

      let arr = this.indexList;
      arr.forEach((item) => {
        console.log("item>>", item);
        if (item.val && !/^\d{4}$/.test(item.field)) {
          console.log("other", item);
          newObj[item.field] = item.val;
        } else if (item.val && /^\d{4}$/.test(item.field)) {
          bkArr.push(item.val);
        } else if (/^\d+(\.\d+)?$/.test(item.field)) {
          shapeTypesArr.push(item.field);
        } else if (~item.field.indexOf("jgzb")) {
          jgOBj = { ...model.jgzbSelect[item.field] };
        } else if (~item.field.indexOf("market")) {
          const index = item.field.indexOf("-");
          const str = item.field.substring(index + 1);
          if (str == "SZ" || str == "SH") {
            marketCode = str;
          } else {
            listSector = str;
          }
          console.log("market", item);
        } else {
          poolTypesArr.push(item.field);
          // console.log("xg", item.field);
        }
      });

      Object.assign(newObj, jgOBj);
      console.log("OBJ", newObj);
      const shapeTypes = shapeTypesArr.join(",");
      const poolTypes = poolTypesArr.join(",");
      const bk = bkArr.join(",");

      let res = {
        ...newObj,
        showField: "securityId",
        // tradeDate: this.tradeDate.replace(/-/g, ""),
        page: 1,
        pageSize: 500,
      };

      if (shapeTypes) {
        res["shapeTypes"] = shapeTypes;
      }
      if (poolTypes) {
        res["scope_poolTypes"] = poolTypes;
      }
      if (bk) {
        res["scope_blockIds"] = bk;
      }
      if (marketCode) {
        res["marketCode"] = marketCode;
      }
      if (listSector) {
        res["listSector"] = listSector;
      }
      if (this.tradeDate) {
        res["tradeDate"] = this.tradeDate.replace(/-/g, "");
      }
      const json = JSON.stringify(res);
      console.log(json);
      window.prompt(
        "",
        `up://["user.info",
                ${Date.now()},
                {"type":"dynamicStock",
                "data": ${json}
                }]`
      );
    },
  },
  mounted() {
    this.$store.state.indexList.push(model.sbql);
    // this.$store.state.indexList.push(model.shzf);
    console.log(">>>>>", this.indexList);
  },
};
</script>
<style lang="scss" scoped>
@import "../style/main.scss";
</style>
<style lang="scss" soped>
@import "../style/elementUI.scss";
</style>
